<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM（针对页面操作）+BOM（针对浏览器）
		      学习主体：针对页面操作比较多---DOM操作
			  JQuery操作DOM：理解：JQ框架改变内容效果
			  js基础可以直接学习，了解函数使用
			  基础语法----事件源之后出现，事件源语法糖中
			  html（）     作用：针对一个元素，覆盖原有html
			  val（）      作用：针对input元素，实现修改文本框内容
			  text（）     作用：生成文本内容
			   -->
			   <script src="js/jquery-1.11.1.js"></script>
			   
	</head>
	<body>
		<!--  -->
		<button>按钮</button>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi optio eum eligendi quidem dolores excepturi necessitatibus earum quia ipsam dolor repellat expedita, culpa quae laborum amet. Quis eius hic beatae!</p>
	    <div style="width: 200px;height: 200px;background: #000;"></div>
		<h3>lorem</h3>
		
		<input type="button" value="按钮2" />
		<input type="text" value="输入框可以直接写文本" />
		 <script>
			 $("button").click(function(){
				 /* JQ操作DOM--html（）函数使用*/
				 $("p").html("<h1>JQ操作DOM-html函数使用</h1>")
			 });
			 /* 练习：div200*200 背景颜色自定，鼠标划过之后，
			 下面内容修改：<h3>提示，修改为黄颜色*/
			 $("div").mouseenter(function(){
			 	$("h3").html("<h3>黄颜色</h3>");
				});
				/* 练习：按钮  文本框     点击按钮，文本增加一行文本*/
				$("input[type='button']").click(function(){
					/* alert("jq选择器是否") */
					$("input[type='text']").val("文本框内容修改~")
				});
				/* 利用JQ操作DOM（页面效果）：元素内容操作（3个函数）
				                            html()
											val()
											text()
											
				                            属性操作（4个函数）
											<p align="center">
											attr()
											removeAttr()
											<input checked>
											prop()
											removeProp
											样式类名操作（4个函数）
											demo{属性：属性值..}
											addClass()
											removeClass()
											toggleClass()
											hasClass()
										    样式样式操作（5个函数）
											css()
											语法：css("""")
											插入和删除操作（7个函数）
											元素遍历操作（6个函数）
											JQ动画操作（7个函数）*/
		 </script>
		 
	</body>
</html>